<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简易计算器</title>
<style>
	body {
		background-color: #eee;
	}
	#calculator {
		margin: 100px 0 0 150px;
	}
</style>
</head>
<body>

<!-- 简易计算器 -->
<div id="calculator">
	<p>
		<input type="text" class="formerInput" value="1" />
		<span class="sign">+</span>
		<input type="text" class="laterInput" value="1" />
		<span>=</span>
		<span class="resultOutput">2</span>
	</p>
	<p>
		<!-- <input type="button" value="+" onclick="addHandler();" />
		<input type="button" value="-" onclick="subtractHandler();" />
		<input type="button" value="×" onclick="multiplyHandler();" />
		<input type="button" value="÷" onclick="divideHandler();" /> -->
		<input type="button" value="+" class="btn" title="add" />
		<input type="button" value="-" class="btn" title="subtract" />
		<input type="button" value="×" class="btn" title="multiply" />
		<input type="button" value="÷" class="btn" title="divide" />
		<input type="button" value="%" class="btn" title="mod" />
		<input type="button" value="^" class="btn" title="power" />
		<input type="button" value="1/x" class="btn" title="invert" />
	</p>
</div>

<script>
    // // 最容易做到的
	    // // 获取元素
	    // var calculator = document.querySelector('#calculator');
	    // var formerInput = calculator.querySelector('.formerInput');
	    // var laterInput = calculator.querySelector('.laterInput');
	    // var sign = calculator.querySelector('.sign');
	    // var resultOutput = calculator.querySelector('.resultOutput');

	    // // 加
	    // function addHandler() {
	    // 	sign.innerHTML = '+';
	    // 	resultOutput.innerHTML = +formerInput.value + +laterInput.value;
	    // }
	    // // 减
	    // function subtractHandler() {
	    // 	sign.innerHTML = '-';
	    // 	resultOutput.innerHTML = formerInput.value - laterInput.value;
	    // }
	    // // 乘
	    // function multiplyHandler() {
	    // 	sign.innerHTML = '×';
	    // 	resultOutput.innerHTML = formerInput.value * laterInput.value;
	    // }
	    // // 除
	    // function divideHandler() {
	    // 	sign.innerHTML = '÷';
	    // 	resultOutput.innerHTML = formerInput.value / laterInput.value;
	    // }

    // // 第一次改进--结构和行为分离
	    // // 获取元素
	    // var calculator = document.querySelector('#calculator');
	    // var formerInput = calculator.querySelector('.formerInput');
	    // var laterInput = calculator.querySelector('.laterInput');
	    // var sign = calculator.querySelector('.sign');
	    // var resultOutput = calculator.querySelector('.resultOutput');
	    // var btns = calculator.querySelectorAll('.btn');

	    // // 绑定事件
	    // // +
	    // btns[0].onclick = addHandler;
	    // // -
	    // btns[1].onclick = subtractHandler;
	    // // ×
	    // btns[2].onclick = multiplyHandler;
	    // // ÷
	    // btns[3].onclick = divideHandler;

	    // // 加
	    // function addHandler() {
	    // 	sign.innerHTML = '+';
	    // 	resultOutput.innerHTML = +formerInput.value + +laterInput.value;
	    // }
	    // // 减
	    // function subtractHandler() {
	    // 	sign.innerHTML = '-';
	    // 	resultOutput.innerHTML = formerInput.value - laterInput.value;
	    // }
	    // // 乘
	    // function multiplyHandler() {
	    // 	sign.innerHTML = '×';
	    // 	resultOutput.innerHTML = formerInput.value * laterInput.value;
	    // }
	    // // 除
	    // function divideHandler() {
	    // 	sign.innerHTML = '÷';
	    // 	resultOutput.innerHTML = formerInput.value / laterInput.value;
	    // }

    // // 第二次改进--循环
	    // // 获取元素
	    // var calculator = document.querySelector('#calculator');
	    // var formerInput = calculator.querySelector('.formerInput');
	    // var laterInput = calculator.querySelector('.laterInput');
	    // var sign = calculator.querySelector('.sign');
	    // var resultOutput = calculator.querySelector('.resultOutput');
	    // var btns = calculator.querySelectorAll('.btn');

	    // // 绑定事件
	    // for (var i = 0; i < btns.length; i++) {
	    // 	btns[i].onclick = function () {
	    // 		switch (this.title) {
	    // 			case 'add':
	    // 				addHandler();
	    // 				break;
	    // 			case 'subtract':
	    // 				subtractHandler();
	    // 				break;
	    // 			case 'multiply':
	    // 				multiplyHandler();
	    // 				break;
	    // 			case 'divide':
	    // 				divideHandler();
	    // 				break;
	    // 		}
	    // 	};
	    // }
	    // // // +
	    // // btns[0].onclick = addHandler;
	    // // // -
	    // // btns[1].onclick = subtractHandler;
	    // // // ×
	    // // btns[2].onclick = multiplyHandler;
	    // // // ÷
	    // // btns[3].onclick = divideHandler;

	    // // 加
	    // function addHandler() {
	    // 	sign.innerHTML = '+';
	    // 	resultOutput.innerHTML = +formerInput.value + +laterInput.value;
	    // }
	    // // 减
	    // function subtractHandler() {
	    // 	sign.innerHTML = '-';
	    // 	resultOutput.innerHTML = formerInput.value - laterInput.value;
	    // }
	    // // 乘
	    // function multiplyHandler() {
	    // 	sign.innerHTML = '×';
	    // 	resultOutput.innerHTML = formerInput.value * laterInput.value;
	    // }
	    // // 除
	    // function divideHandler() {
	    // 	sign.innerHTML = '÷';
	    // 	resultOutput.innerHTML = formerInput.value / laterInput.value;
	    // }

    // // 第三次改进--提取函数
	   //  // 获取元素
	   //  var calculator = document.querySelector('#calculator');
	   //  var formerInput = calculator.querySelector('.formerInput');
	   //  var laterInput = calculator.querySelector('.laterInput');
	   //  var sign = calculator.querySelector('.sign');
	   //  var resultOutput = calculator.querySelector('.resultOutput');
	   //  var btns = calculator.querySelectorAll('.btn');

	   //  // 绑定事件
	   //  each(btns, function (index, elem	) {
	   //  	elem.onclick = function () {
	   //  		switch (this.title) {
	   //  			case 'add':
	   //  				addHandler();
	   //  				break;
	   //  			case 'subtract':
	   //  				subtractHandler();
	   //  				break;
	   //  			case 'multiply':
	   //  				multiplyHandler();
	   //  				break;
	   //  			case 'divide':
	   //  				divideHandler();
	   //  				break;
	   //  		}
	   //  	};
	   //  });
	    
	   //  // 遍历
	   //  function each(array, fn) {
	   //  	for (var i = 0; i < array.length; i++) {
	   //  		fn(i, array[i]);
	   //  	}
	   //  }

	   //  // 更新符号
	   //  function updateSign(symbol) {
	   //  	sign.innerHTML = symbol;
	   //  }

	   //  // 加法
	   //  function add(num1, num2) {
	   //  	return +num1 + +num2;
	   //  }
	   //  // 减法
	   //  function subtract(num1, num2) {
	   //  	return num1 - num2;
	   //  }
	   //  // 乘法
	   //  function multiply(num1, num2) {
	   //  	return num1 * num2;
	   //  }
	   //  // 除法
	   //  function divide(num1, num2) {
	   //  	return num1 / num2;
	   //  }

	   //  // 输出结果
	   //  function outputResult(result) {
	   //  	resultOutput.innerHTML = result;
	   //  }

	   //  // 加
	   //  function addHandler() {
	   //  	// sign.innerHTML = '+';
	   //  	updateSign('+');
	   //  	outputResult(add(formerInput.value, laterInput.value));
	   //  }
	   //  // 减
	   //  function subtractHandler() {
	   //  	updateSign('-');
	   //  	outputResult(subtract(formerInput.value, laterInput.value));
	   //  }
	   //  // 乘
	   //  function multiplyHandler() {
	   //  	updateSign('×');
	   //  	outputResult(multiply(formerInput.value, laterInput.value));
	   //  }
	   //  // 除
	   //  function divideHandler() {
	   //  	updateSign('÷');
	   //  	outputResult(divide(formerInput.value, laterInput.value));
	   //  }

	  // // 第四次改进--管理代码(找到组织)
		 //    // 获取元素
		 //    var wrapElem = document.querySelector('#calculator');
		 //    var calculatorElem = {
		 //    	formerInput: wrapElem.querySelector('.formerInput'),
		 //    	laterInput: wrapElem.querySelector('.laterInput'),
		 //    	sign: wrapElem.querySelector('.sign'),
		 //    	resultOutput: wrapElem.querySelector('.resultOutput'),
		 //    	btns: wrapElem.querySelectorAll('.btn')
		 //    };

		 //    // 绑定事件
		 //    each(calculatorElem.btns, function (index, elem	) {
		 //    	elem.onclick = function () {
		 //    		switch (this.title) {
		 //    			case 'add':
		 //    				addHandler();
		 //    				break;
		 //    			case 'subtract':
		 //    				subtractHandler();
		 //    				break;
		 //    			case 'multiply':
		 //    				multiplyHandler();
		 //    				break;
		 //    			case 'divide':
		 //    				divideHandler();
		 //    				break;
		 //    		}
		 //    	};
		 //    });
		    
		 //    // 遍历
		 //    function each(array, fn) {
		 //    	for (var i = 0; i < array.length; i++) {
		 //    		fn(i, array[i]);
		 //    	}
		 //    }

		 //    // 更新符号
		 //    function updateSign(symbol) {
		 //    	calculatorElem.sign.innerHTML = symbol;
		 //    }

		 //    var operation = {
		 //    	add: function(num1, num2) {
			//     	return +num1 + +num2;
			//     },
			// subtract: function(num1, num2) {
			//     	return num1 - num2;
			//     },
			// multiply: function(num1, num2) {
			//     	return num1 * num2;
			//     },
			// divide: function(num1, num2) {
			//     	return num1 / num2;
		 //   	 }
		 //    };

		 //    // 输出结果
		 //    function outputResult(result) {
		 //    	calculatorElem.resultOutput.innerHTML = result;
		 //    }

		 //    // 加
		 //    function addHandler() {
		 //    	// sign.innerHTML = '+';
		 //    	updateSign('+');
		 //    	outputResult(operation.add(calculatorElem.formerInput.value, calculatorElem.laterInput.value));
		 //    }
		 //    // 减
		 //    function subtractHandler() {
		 //    	updateSign('-');
		 //    	outputResult(operation.subtract(calculatorElem.formerInput.value, calculatorElem.laterInput.value));
		 //    }
		 //    // 乘
		 //    function multiplyHandler() {
		 //    	updateSign('×');
		 //    	outputResult(operation.multiply(calculatorElem.formerInput.value, calculatorElem.laterInput.value));
		 //    }
		 //    // 除
		 //    function divideHandler() {
		 //    	updateSign('÷');
		 //    	outputResult(operation.divide(calculatorElem.formerInput.value, calculatorElem.laterInput.value));
		 //    }

	// // 第五次改进--OCP开放--封闭原则
		// 	    // 获取元素
		// 	    var wrapElem = document.querySelector('#calculator');
		// 	    var calculatorElem = {
		// 	    	formerInput: wrapElem.querySelector('.formerInput'),
		// 	    	laterInput: wrapElem.querySelector('.laterInput'),
		// 	    	sign: wrapElem.querySelector('.sign'),
		// 	    	resultOutput: wrapElem.querySelector('.resultOutput'),
		// 	    	btns: wrapElem.querySelectorAll('.btn')
		// 	    };

		// 	    // 绑定事件
		// 	    each(calculatorElem.btns, function (index, elem	) {
		// 		    	elem.onclick = function () {
		// 		    		updateSign(this.value);
		// 		    		outputResult(operate(this.title, calculatorElem.formerInput.value, calculatorElem.laterInput.value));
		// 		    	};
		// 	    });
			    


		// 	    // 遍历
		// 	    function each(array, fn) {
		// 	    	for (var i = 0; i < array.length; i++) {
		// 	    		fn(i, array[i]);
		// 	    	}
		// 	    }

		// 	    // 更新符号
		// 	    function updateSign(symbol) {
		// 	    	calculatorElem.sign.innerHTML = symbol;
		// 	    }

		// 	    // 运算
		// 	    function operate(name, num1, num2) {
		// 	    		if (!operation[name]) throw new Error('不存在名为' + name + '的运算方法！');
		// 	    		return operation[name](num1, num2);
		// 	    }

		// 	    var operation = {
		// 	    	add: function(num1, num2) {
		// 		    	return +num1 + +num2;
		// 		    },
		// 		subtract: function(num1, num2) {
		// 		    	return num1 - num2;
		// 		    },
		// 		multiply: function(num1, num2) {
		// 		    	return num1 * num2;
		// 		    },
		// 		divide: function(num1, num2) {
		// 		    	return num1 / num2;
		// 	   	 },
		// 	   	 addOperation: function (name, fn) {
		// 	   	 	if (!this[name]) {
		// 	   	 		this[name] = fn;
		// 	   	 	}
		// 	   	 	return this;
		// 	   	 }
		// 	    };

		// 	    operation.addOperation('mod', function (num1, num2) {
		// 	    	return num1 % num2;
		// 	    }).addOperation('power', function (base, power) {
		// 	    	return Math.pow(base, power);
		// 	    });

		// 	    // 输出结果
		// 	    function outputResult(result) {
		// 	    	calculatorElem.resultOutput.innerHTML = result;
		// 	    }

	// 第六次改进--模块化
		// (function () {
		// 	// 获取元素
		//     var wrapElem = document.querySelector('#calculator');
		//     var calculatorElem = {
		//     	formerInput: wrapElem.querySelector('.formerInput'),
		//     	laterInput: wrapElem.querySelector('.laterInput'),
		//     	sign: wrapElem.querySelector('.sign'),
		//     	resultOutput: wrapElem.querySelector('.resultOutput'),
		//     	btns: wrapElem.querySelectorAll('.btn')
		//     };

		    // 绑定事件
		    each(calculatorElem.btns, function (index, elem	) {
			    	elem.onclick = function () {
			    		updateSign(this.value);
			    		outputResult(operate(this.title, calculatorElem.formerInput.value, calculatorElem.laterInput.value));
			    	};
		    });
		    


		//     // 遍历
		//     function each(array, fn) {
		//     	for (var i = 0; i < array.length; i++) {
		//     		fn(i, array[i]);
		//     	}
		//     }

		//     // 更新符号
		//     function updateSign(symbol) {
		//     	calculatorElem.sign.innerHTML = symbol;
		//     }

		//     // 运算
		//     var operate = (function () {
		//     		var operation = {
		// 		    	add: function(num1, num2) {
		// 			    	return +num1 + +num2;
		// 			    },
		// 			subtract: function(num1, num2) {
		// 			    	return num1 - num2;
		// 			    },
		// 			multiply: function(num1, num2) {
		// 			    	return num1 * num2;
		// 			    },
		// 			divide: function(num1, num2) {
		// 			    	return num1 / num2;
		// 		   	 },
		// 		   	 addOperation: function (name, fn) {
		// 		   	 	if (!operation[name]) {
		// 		   	 		operation[name] = fn;
		// 		   	 	}
		// 		   	 	return operation;
		// 		   	 }
		// 	    };

		//     	// 	function operate(name, num1, num2) {
		// 	    // 		if (!operation[name]) throw new Error('不存在名为' + name + '的运算方法！');
		// 	    // 		return operation[name](num1, num2);
		// 	    // }
		// 	    function operate(name) {
		// 	    		if (!operation[name]) throw new Error('不存在名为' + name + '的运算方法！');
		// 	    		return operation[name].apply(operation, [].slice.call(arguments, 1, arguments.length));
		// 	    }
		// 	    operate.addOperation = operation.addOperation;

		// 	    return operate;
		// 	    // return function (name, num1, num2) {
		// 	    // 		if (!operation[name]) throw new Error('不存在名为' + name + '的运算方法！');
		// 	    // 		return operation[name](num1, num2);
		// 	    // };
			    
		//     })();

		    
		    
		//     operate.addOperation('mod', function (num1, num2) {
		//     	return num1 % num2;
		//     }).addOperation('power', function (base, power) {
		//     	return Math.pow(base, power);
		//     }).addOperation('invert', function (num) {
		//     	return 1 / num;
		//     });

		//     // 输出结果
		//     function outputResult(result) {
		//     	calculatorElem.resultOutput.innerHTML = result;
		//     }
		// })();

	// 第七次改进
	  
</script>
</body>
</html>